# Introduction

Evergreen uses the amazing [@blueprintjs/icons](https://blueprintjs.com/docs/#icons) package for all of its icons.

## Implementation Details

All of Evergreen's icons are exported as individual components, and can be imported directly like so:

`import { CrossIcon } from 'evergreen-ui'`

`import { InfoSignIcon, EditIcon } from 'evergreen-ui'`

### Icons are not buttons

A icon is only a `svg` element and should not have `onClick` handlers.
If you need a clickable icon, use `IconButton` instead.

## Basic icon usage

```jsx
<CrossIcon />
```

## Resizing the icon

```jsx
<BanCircleIcon size={40} />
```

## Changing the color

Use the `color` prop on a `Icon` component to change the color.
There are a couple of presets available: `default`, `muted`, `disabled`, `selected`, `success`, `info`, `danger`, `warning`.

```jsx
<Pane>
  <BanCircleIcon color="danger" marginRight={16} />
  <TickCircleIcon color="success" marginRight={16} />
  <WarningSignIcon color="warning" marginRight={16} />
  <InfoSignIcon color="info" marginRight={16} />
  <EditIcon color="muted" marginRight={16} />
  <EditIcon color="selected" marginRight={16} />
  <EditIcon color="disabled" marginRight={16} />
</Pane>
```

## Convenience component

There is an exported `Icon` component which acts as a convenient wrapper around icons so you can dynamically pass icons to it:

```jsx
<Icon icon={CogIcon} size={12} />
```

## All icons

Each icon has two different `svg` variations, a `16px` and `20px` variation.
Evergreen will choose the most appropriate size based on the `size` passed to the icon.

<IconSearch />
